<!--
 * @Date: 2023-04-15 17:37:25
 * @LastEditTime: 2023-06-20 21:18:10

 * 介绍:
-->
<script lang="ts" setup>
import { _require } from "@@/utils/tools";

const props = withDefaults(
  defineProps<{
    bg?: string;
    blur?: string;
    bevelColor?: string;
    minHeight?: string;
  }>(),
  {
    bg: "var(--C-T1-O1)",
    blur: "35rem",
    bevelColor: "rgba(255,255,255,0.2)",
  }
);
</script>
<template>
  <div
    class="CglassCard"
    :style="{
      '--CglassCard-bg': props.bg,
      '--CglassCard-blur': props.blur,
      '--CglassCard-bevelColor': props.bevelColor,
      minHeight: props.minHeight,
    }"
  >
    <div class="CglassCard_backstage">
      <div class="CglassCard_abrazinebg">
        <slot name="backstage">
          <Rimage
            class="backstage"
            height="500rem"
            :src="_require('src/assets/images/components/CglassCard_bg.png')"
          />
        </slot>
      </div>
    </div>
    <slot></slot>
  </div>
</template>
<style lang="scss" scoped>
.CglassCard {
  position: relative;
  overflow: hidden;
  background: var(--CglassCard-bg);
  padding: var(--gap-md);
  border-radius: var(--R-md);
  .CglassCard_backstage {
    z-index: -1;
    position: absolute;
    bottom: 50%;
    left: 0;
    width: 100%;
    transform: translateY(50%);
    // background-image: url(@@/assets/images/components/CglassCard_abrazinebg.png);
    background-size: 100rem 100rem;
    .CglassCard_abrazinebg {
      filter: blur(var(--CglassCard-blur));
    }
  }
  box-shadow: inset var(--CglassCard-bevelColor) 5rem 5rem 10rem;
  .CglassCard_content {
    position: relative;
    z-index: 2;
  }
}
</style>
